<button *ngIf="!userService.user.avatarUrl" mat-icon-button [matMenuTriggerFor]="avatarTrigger">
  <mat-icon class="nav-user-icon" svgIcon="default_avatar"
            [@avatarAnim]="avatarState"></mat-icon>
</button>

<button *ngIf="userService.user.avatarUrl" mat-icon-button [matMenuTriggerFor]="avatarTrigger">
  <img [src]="userService.user.avatarUrl" class="nav-user-icon"
       [@avatarAnim]="avatarState" alt=""/>
</button>

<mat-menu #avatarTrigger="matMenu">

  <div class="user-menu">

    <div class="user-menu-col">
      <div>{{userService.user.username | text}}</div>
    </div>

    <div class="user-menu-col">
      <div class="nav-icon-div user-menu-icon-div">
        <mat-icon svgIcon="download" class="user-menu-icon"></mat-icon>
        <div>{{user.downloaded | byte}}</div>
      </div>

      <div class="nav-icon-div user-menu-icon-div">
        <mat-icon svgIcon="up" class="user-menu-icon"></mat-icon>
        <div>{{user.uploaded | byte}}</div>
      </div>
    </div>

    <div class="user-menu-col">
      <div class="nav-icon-div user-menu-icon-div">
        <mat-icon svgIcon="rate" class="user-menu-icon"></mat-icon>
        <div>{{user.uploaded | rate: user.downloaded}}</div>
      </div>

      <div class="nav-icon-div user-menu-icon-div">
        <mat-icon svgIcon="gold" class="user-menu-icon"></mat-icon>
        <div>{{user.gold}}</div>
      </div>

      <div class="nav-icon-div user-menu-icon-div">
        <mat-icon svgIcon="diamond" class="user-menu-icon"></mat-icon>
        <div>{{user.diamond}}</div>
      </div>
    </div>
  </div>
  <div class="user-menu-actions">
    <button color="accent" mat-button [routerLink]="'/user/details'">个人主页</button>
    <button (click)="logout()" mat-button>注销</button>
  </div>
</mat-menu>
